<template>
  <transition appear name="slide-fade">
    <div class="list-container">
      <header class="header">
        <router-link to="/">
          <img
            class="close-icon"
            src="../../assets/icon/close-white.svg"
            alt="close"
          />
        </router-link>
        <h1 class="heading">绑定信息</h1>
      </header>
      <div class="content">
        <el-input
          placeholder="请输入姓名"
          prefix-icon="el-icon-search"
          v-model="name"
        >
        </el-input>
        <el-input
          placeholder="请输入手机号"
          prefix-icon="el-icon-search"
          v-model="mobile"
        >
        </el-input>
        <el-select v-model="team" placeholder="请选择团队">
          <el-option
            v-for="item in options"
            :key="item.teamId"
            :label="item.teamName"
            :value="item.teamId"
          >
          </el-option>
        </el-select>
        <el-button round :disabled="flag">确认提交</el-button>
      </div>
    </div>
  </transition>
</template>

<script>
import { mapState } from 'vuex';
import { getTeamInfo } from '@/api';

export default {
  name: 'BindingInfoPage',
  data() {
    return {
      name: '',
      mobile: '',
      options: [],
      team: undefined,
      flag: false, // 用于控制提交按钮是否disabled
    };
  },
  computed: mapState(['nickname', 'headImgUrl', 'score', 'rank']),
  watch: {},
  created() {
    getTeamInfo().then(({ data }) => {
      this.options = data.page.list;
    });
  },
};
</script>

<style lang="scss" scoped src="./style.scss"></style>
